<template>
  <div id="table">
    <div id="header">
      <el-button type="primary" @click="handleClick(null,0, null)" size="small" >新增</el-button>
<!--      <div style="width:16%">-->
<!--        &lt;!&ndash; <el-input placeholder="请输入内容" v-model="input2" class="input-with-select"> &ndash;&gt;-->
<!--        <el-select v-model="select" slot="prepend" placeholder="请选择查询类型">-->
<!--          <el-option label="商品名称(模糊查询)" value="c_name"></el-option>-->
<!--          <el-option label="商品类别(模糊查询)" value="c_sort"></el-option>-->
<!--          <el-option label="商品详情(模糊查询)" value="c_detail"></el-option>-->
<!--          <el-option label="创建时间(模糊查询)" value="c_create_time"></el-option>-->
<!--        </el-select>-->
<!--      </div>-->
<!--      <div style="width:15%;padding-right: 10px">-->
<!--        <el-input v-model="input" placeholder="请输入内容"></el-input>-->
<!--      </div>-->
      <el-button type="primary" size="small" @click="handleClick(null,4, null)">点击查询</el-button>
    </div>
    <div id="main">
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          label="商品编号"
          show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.c_no }}</template>
        </el-table-column>
        <el-table-column
          prop="c_name"
          label="商品名称"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="c_img"
          label="商品图片"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="c_sort"
          label="商品类别"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="c_detail"
          label="商品详情"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="c_create_time"
          label="创建时间"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row,1, scope.row)" type="text" size="mini">删除</el-button>
            <el-button @click="handleClick(scope.row,2, scope.row)" type="text" size="mini">查看</el-button>
            <el-button @click="handleClick(scope.row,3, scope.row)" type="text" size="mini">编辑</el-button>
          </template>
        </el-table-column>

      </el-table>
      <el-dialog :title="title" :visible.sync="dialogFormVisible" width="40%" >
        <el-form :model="form">
          <el-form-item label="商品名称" :label-width="formLabelWidth">
            <el-input v-model="form.c_name" autocomplete="off" :disabled="dialogEdit"></el-input>
          </el-form-item>
          <el-form-item label="商品类别" :label-width="formLabelWidth">
            <el-input v-model="form.c_sort" autocomplete="off" :disabled="dialogEdit"></el-input>
          </el-form-item>
          <el-form-item label="商品图片" :label-width="formLabelWidth">
<!--            <el-input v-model="form.c_img" autocomplete="off" :disabled="dialogEdit"></el-input>-->
            <el-upload
              action="#"
              list-type="picture-card"
              :auto-upload="false">
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{file}">
                <img class="el-upload-list__item-thumbnail"
                  :src="file.url" alt="" style="width: 100%;height: 100%" >
                <span class="el-upload-list__item-actions">
                  <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)" >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                </span>
              </div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible" style="z-index: 3000">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </el-form-item>
          <el-form-item label="商品描述" :label-width="formLabelWidth">
            <el-input v-model="form.c_detail" autocomplete="off" :disabled="dialogEdit"></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible = false" v-if="title==='查看信息'">确 定</el-button>
          <el-button @click="changeDialogFormVisible(false, 1, null)" v-if="title === '编辑信息'">取 消</el-button>
          <el-button type="primary" @click="changeDialogFormVisible(false, 2, form)" v-if="title === '编辑信息'">确 定</el-button>
          <el-button @click="changeDialogFormVisible(false, 3, null)" v-if="title === '添加信息'">取 消</el-button>
          <el-button type="primary" @click="changeDialogFormVisible(false, 4, form)" v-if="title === '添加信息'">确 定</el-button>
          <el-button type="primary" @click="changeDialogFormVisible(false, 5, form)" v-if="title === '查询信息'">确 定</el-button>
        </div>

      </el-dialog>

    </div>
    <div id="footer">
      <div class="footer-box">
        <el-button @click="toggleSelection()" style="display: flex;align-items: center">取消全选</el-button>
      </div >
      <!--current-page:当前在第几页
          page-sizes：每业显示行数的集合
          page-size：当前每页显示几行
          total：总条数-->
      <div class="footer-box">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5,10]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="dataTotal">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CommTable',
  data () {
    return {
      input: '',
      input1: '',
      input2: '',
      input3: '',
      select: '',
      dataTotal: 1,
      tableData: [], // 存储传递过来的数据
      multipleSelection: [],
      page: 1, // 设置当前页面的位置
      size: 5, // 设置当前页面显示的条数
      currentPage: 1, // 当前第几页
      dialogFormVisible: false, // 设置弹窗是否显示
      formLabelWidth: '120px', // 设置弹框的宽度
      title: '', // 设置弹框的名称
      dialogEdit: false, // 设置弹框是否可以编辑
      form: {
        c_no: null,
        c_sort: null,
        c_name: null,
        c_img: null,
        c_detail: null,
        c_create_time: null
      },
      dialogImageUrl: '', // 设置图片上传后的路径
      dialogVisible: false, // 设置弹框是否可视化
      disabled: false // 设置弹框是否能使用
    }
  },
  methods: {
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.size = val
      this.getData()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.page = val
      this.getData()
    },
    // 业务判断处理
    handleClick (row, num, obj) {
      // 点击按钮后执行的代码
      if (num === 0) {
        console.log('添加信息')
        this.examine(obj, true, '添加信息', false)
        this.getData()
      } else if (num === 1) { // 已经完成
        console.log('删除信息')
        this.deleteInfo(obj)
        this.getData()
      } else if (num === 2) { // 已经完成
        console.log('查看信息')
        this.examine(obj, true, '查看信息', true)
        this.getData()
      } else if (num === 3) {
        console.log('编辑信息')
        this.examine(obj, true, '编辑信息', false)
        this.getData()
      } else {
        console.log('查询信息')
        this.examine(this.form, true, '查询信息', false)
      }
      console.log(obj)
    },
    // 删除信息
    deleteInfo (obj) {
      this.$axios.get('/deleteCommodity', {
        params: {
          no: obj.c_no
        }
      }).then(response => {
        console.log(response)
        const h = this.$createElement
        this.$notify({
          title: '消息提示',
          message: h('i', {style: 'color: teal'}, `商品编号：${obj.c_no},${response.data}`),
          duration: 2500
        })
      }).catch(err => {
        console.log(err)
      })
    },
    // 查看信息
    examine (obj, bool, title, bool2) {
      if (title === '添加信息') {
        this.form.c_no = null
        this.form.c_sort = null
        this.form.c_name = null
        this.form.c_img = null
        this.form.c_detail = null
        this.form.c_create_time = null
      } else {
        this.form.c_no = obj.c_no
        this.form.c_sort = obj.c_sort
        this.form.c_name = obj.c_name
        this.form.c_img = obj.c_img
        this.form.c_detail = obj.c_detail
        this.form.c_create_time = obj.c_create_time
      }
      this.dialogFormVisible = bool
      this.title = title
      this.dialogEdit = bool2
    },
    // 分页获取信息
    getData () {
      this.$axios.get('/limitSelect', {
        params: {
          page: this.page,
          size: this.size
        }
      }).then(response => {
        console.log('接口输出', response)
        this.tableData = response.data.commList
        this.dataTotal = response.data.count
      }).catch(err => {
        console.log(err)
      })
    },
    // 设置弹出框的是否执行业务
    changeDialogFormVisible (Info, num, obj) {
      this.dialogFormVisible = Info
      if (num === 1) {
        const h = this.$createElement
        this.$notify({
          title: '消息提示',
          message: h('i', {style: 'color: teal'}, `取消修改用户操作`),
          duration: 1500
        })
      } else if (num === 2) {
        this.updateUser(obj) // 修改信息
      } else if (num === 3) {
        const h = this.$createElement
        this.$notify({
          title: '消息提示',
          message: h('i', {style: 'color: teal'}, `取消新增用户操作`),
          duration: 1500
        })
      } else if (num === 4) {
        this.insertUser(obj)
      } else {
        console.log('执行了查询数据功能')
        this.queryLimitSelect(obj)
      }
    },
    // 弹框提示
    dialogTip (obj, title) {
      const h = this.$createElement
      this.$notify({
        title: '消息提示',
        message: h('i', {style: 'color: teal'}, `用户：${obj.c_name}[${obj.c_no}],${title}`),
        duration: 2000
      })
      this.getData() // 修改结束后获取数据
    },
    // 修改信息
    updateUser (obj) {
      this.$axios.get('/updateCommodity', {
        params: {
          c_no: obj.c_no,
          c_sort: obj.c_sort,
          c_name: obj.c_name,
          c_detail: obj.c_detail
        }
      }).then(response => {
        if (response.data === '更新成功') {
          this.dialogTip(obj, '信息修改成功')
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 新增信息
    insertUser (obj) {
      this.$axios.get('/addCommodity', {
        params: {
          c_sort: obj.c_sort,
          c_name: obj.c_name,
          c_detail: obj.c_detail
        }
      }).then(response => {
        if (response.data === '添加成功') {
          this.dialogTip(obj, '信息添加成功')
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 按需查询并且分页
    queryLimitSelect (obj) {
      console.log(obj)
      this.$axios.get('/queryLimitSelect', {
        params: {
          c_name: obj.c_name,
          c_sort: obj.c_sort,
          c_detail: obj.c_detail,
          page: this.page,
          size: this.size
        }
      }).then(response => {
        console.log('接口输出', response)
        this.tableData = response.data.commList
        this.dataTotal = response.data.count
        this.$message({
          message: '查询到' + response.data.count + '数据',
          type: 'success'
        })
      }).catch(err => {
        console.log(err)
      })
    },
    // 测试查询
    query () {
      console.log('测试', this.multipleSelection, this.select)
    }
  },
  mounted () {
    this.getData(this.multipleSelection)
  },
  // 添加图片
  handleRemove (file) {
    console.log(file)
  },
  handlePictureCardPreview (file) {
    this.dialogImageUrl = file.url
    this.dialogVisible = true
  },
  handleDownload (file) {
    console.log(file)
  }
}
</script>

<style scoped>
  #table{
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
  }
  #header{
    width: 100%;
    height: 8%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 20px;
  }
  #main{
    width: 100%;
    height: 84%;
    box-sizing: border-box;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    padding: 0 20px;

  }
  #footer{
    width: 100%;
    height: 8%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 20px;
  }
  .footer-box{
    height: 50%;
    display: flex;
    align-content: center;
  }
  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
  .cell,.el-tooltip{
    text-align: center !important;
  }
  /*设置图片上传*/
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
